<template>
	<view class="bt">
        <image class="bt_im"  mode="widthFix"  src="https://oa.yuxiang123.cn/uploads/xcx_img/yqhy.png" ></image>
        <view class="content_t">
            <view class="content_v">用户充值 分佣百分之五</view>

            <image style="width: 100%;"  mode="widthFix"  src="https://oa.yuxiang123.cn/uploads/xcx_img/ner.png" ></image>

            <view style="display: flex;flex-wrap: wrap;margin-top: -140rpx;">
                <view style="width: 23%;    padding: 5%;">分享活动 给您好友</view>
                <view style="width: 23%;    padding: 5%;">好友接受 您的邀请</view>
                <view style="width: 23%;    padding: 5%;">好友充值 您得佣金</view>
            </view>
            <view class="invite"  @click="sPopup = true">
                立即邀请
            </view>
            <view class="content_v" style="font-size: 36rpx;"   @click="toHome('/merchant/shop/add_agent',1)" >深度合作 成为代理商 <image style="width: 9%;position: relative;top: 16rpx;"  mode="widthFix"  src="https://oa.yuxiang123.cn/uploads/xcx_img/qt_y.png" ></image></view>
        </view>
        <view class="content_tt">
            <view class="content_v" style="margin-top: 10rpx;">我的奖励</view>
            <view   style="display: flex;flex-wrap: wrap;background-color: rgba(54, 98, 236, 0.06);border-radius: 20rpx;">
                <view  class="content" @click="toHome('/subone/user/invite_list',0)">
                    <view class="content-font">{{info.sum}}</view>
                    <view class="content-center">已邀请好友</view>
                </view>
                <view  class="content">
                    <view class="content-font">{{info.price}}</view>
                    <view class="content-center">获得总佣金</view>
                </view>
                <view  class="content">
                    <view class="content-font">{{info.num}}</view>
                    <view class="content-center">可提现佣金</view>
                </view>
            </view>
            <view class="tixian" @click="tixian">去提现</view>
            <!-- <view class="invite"  style="margin-bottom: 40rpx;" @click="toHome('/subone/user/invite_list',0)">
                查看详情
            </view> -->
            <scroll-view class="list" scroll-y="true" style="    max-height: 850rpx;padding-top: 30rpx;">
                <view class="item" v-for="(item,index) in list" :key="index">
                    <view class="user">
                        <view class="img">
                            <image src="https://oa.yuxiang123.cn/assets/task/shop/jine.png" mode="aspectFill"></image>
                        </view>
                        <view class="info">
                            <view class="info_name" >
                                <view style="margin-top: 20rpx;color: #4CAF50;" v-if="item.type == 1">邀请奖励</view>
                                <view style="margin-top: 20rpx;color: #af4c4c;" v-else>申请提现</view>
                                <view class="info_time">{{item.add_time}}</view>
    
                               
                            </view>
                        </view>
                        <view v-if="item.service_price > 0" style="color: #af4c4c;width: 170rpx;font-size: 28rpx; margin-top: 10rpx;">
                            <view>手续费</view>
                            <view>-10</view>
                        </view>
                        <view>
                            <view v-if="item.type == 1" class="info_time" style="color: #4CAF50;text-align: right;
                            margin-top: -10rpx;margin-right: 32rpx;">＋{{item.price}}</view>
                            <view v-else>
                                <view v-if="item.status == 'created'" class="info_time" style="color: #af4c4c;text-align: right; margin-top: -10rpx;margin-right: 32rpx;">申请中</view>
                                <view v-if="item.status == 'successed'" class="info_time" style="color: #af4c4c;text-align: right; margin-top: -10rpx;margin-right: 32rpx;">－{{item.price}}</view>
                                <view v-if="item.status == 'rejected'" class="info_time" style="color: #af4c4c;text-align: right; margin-top: -10rpx;margin-right: 32rpx;">已拒绝</view>
                        
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
		</view>
	
		<u-popup v-model="showHaibao" mode="center">
			<!-- #ifdef MP-WEIXIN -->
				<image class="haibao" :src="haibao" mode="widthFix"></image>
				<view class="haibao_btn" @click="download_haibao()">保存图片分享</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS || H5 -->
				<image class="haibao" :src="haibao"  mode="widthFix" @click="clickImg()"></image>
				<view class="haibao_btn" >点击图片长按保存分享</view>
			<!-- #endif -->
		</u-popup>

		<u-popup v-model="sPopup" mode="bottom">
			<view class="shareArea">
				<view class="shareTitle">
					<view class="tit">
						<text class="text">分享给朋友</text>
					</view>
					<image class="close" src="/static/close.png" mode="aspectFill" @click="sPopup=false"></image>
				</view>
				<view class="shareList">
					<view class="shareItem" @click="shareOutEvent(2)" v-if="!isHuaWei">
						<image class="shareImg" src="@/static/wxfriend.png" mode="aspectFit"></image>
						<text class="shareTxt">分享海报</text>
					</view>					
					<button open-type="share" class="shareItem" style="margin:0;padding:0;line-height:40rpx;"  @click="shareOutEvent(1)">
						<image class="shareImg" src="@/static/wx.png" mode="aspectFit"></image>
						<text class="shareTxt">微信好友</text>
					</button>
				</view>
			</view>		
		</u-popup>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				time:'',
				sPopup:false,
				showHaibao:false,
				list:[],
				haibao:'',
				timeShow:false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				inviteList:[],
				info:[],
				inviteTotal:0,
				page:1,
				userInfo:''
			}
		},
		// 1.发送给朋友
		onShareAppMessage(e) {
			var that=this;
		    return {
				title: '苏拉营销',
				path: '/pages/shop/shopClass?invite_user_id='+ that.userInfo.id,    // 全局分享的路径
				imageUrl:that.shareimg,    // 全局分享的图片
			}
		},
		//2.分享到朋友圈
		// onShareTimeline() {
		// 	var that=this;
		//     return {
		// 		title: '苏拉营销',
		// 		path: '/pages/shop/shopClass?invite_user_id='+ that.userInfo.id,    // 全局分享的路径
		// 		imageUrl:that.shareimg,    // 全局分享的图片
		// 	}
		// },
		onLoad() {			
			//判断是否是华为
			let isHuaWei= getApp().globalData.isHuaWei;
			if(isHuaWei){
				this.setData({
					isHuaWei: isHuaWei
				})
			}

			var date = new Date();
			var year = date.getFullYear();
			if(date.getMonth()+1 < 10){
				var month ='0' + (date.getMonth()+1);
			}else{
				var month = date.getMonth()+1;
			}
			this.time = year + '-' + month;
			wx.showShareMenu({
			    withShareTicket:true,
			    menus:["shareAppMessage","shareTimeline"]
			});
			this.getshareimg();
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.getInvite();
			this.getInvitee();
			uni.request({
				url:'https://oa.yuxiang123.cn/api/index/addEventStatisticsPage',
				method:'POST',
				header:{"content-type":"application/x-www-form-urlencoded"},
				data:{'type':'xcx','user_id':uni.getStorageSync('openid'),'event':'邀请好友'},
			})
		},
        onReachBottom() {
			this.getInviteS();
		},
		methods: {
            tixian:function(){
				uni.showModal({
					title: '提示',
					content: '是否申请全额提现？手续费为提现金额的5%，单笔提现超过500则不收取手续费',
					success: function (res) {
						if (res.confirm) {
							//更新订单状态
			
						}
					}
				});
			},
            getInvitee:function(){
				this.$show();
                uni.request({
					url: 'https://oa.yuxiang123.cn/api/shop_user/get_withdraw_list',
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					data:{
						token:uni.getStorageSync('token'),
						page:this.page,
					    pagesize:'20'
					},
					success: (res) => {
						this.$hide()
					    this.list = res.data.data;
					}
				})
			},
			getInviteS:function(){
				if(this.page * 20 > this.list.length){
					return false
				}
				this.page++;
				this.$show();
                uni.request({
					url: 'https://oa.yuxiang123.cn/api/shop_user/get_withdraw_list',
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					data:{
						token:uni.getStorageSync('token'),
						page:this.page,
					    pagesize:'20'
					},
					success: (res) => {
						this.$hide()
                        this.list = this.list.concat(res.data.data);
					}
				})
			},
			clickImg() {
				var url = this.haibao;
				var that = this;
				// #ifdef MP-WEIXIN
				uni.previewImage({
					urls: [url]
				})
				// #endif
				// #ifdef  APP-PLUS
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['保存图片'],
						success: (data) => {
							
							if(!uni.getStorageSync('save_img_previewImage') && that.isHuaWei){
								uni.showModal({
									title: "获取你的相册权限",
									content: "将获取你的相册权限,用于储存图片到本地相册",
									success: function (res) {
										if (res.cancel) {
										} else if (res.confirm) {
											uni.setStorageSync('save_img_previewImage',1);
											uni.downloadFile({
												url: url,
												success: (res) => {
													//将临时路径保存到相册，即可在相册中查看图片
													uni.saveImageToPhotosAlbum({
														filePath: res.tempFilePath, //不支持网络地址
														success: function () {
															uni.showToast({
															title: '保存图片到相册成功',
															position: 'bottom'
															});
														},
														fail: (e) => {
															if(e.errCode == 12 &&  e.errMsg == 'saveImageToPhotosAlbum:fail No Permission'){
																uni.showModal({
																	content: '检测到您没打开相册权限，如需使用储存图片功能请前往设置开启相册权限？',
																	confirmText: "确认",
																	cancelText: '取消',
																})
															}
														}
													});
												}
											})
										}
									},
								});
							}else{
								uni.downloadFile({
									url: url,
									success: (res) => {
										//将临时路径保存到相册，即可在相册中查看图片
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath, //不支持网络地址
											success: function () {
												uni.showToast({
												title: '保存图片到相册成功',
												position: 'bottom'
												});
											},
											fail: (e) => {
												if(e.errCode == 12 &&  e.errMsg == 'saveImageToPhotosAlbum:fail No Permission'){
													uni.showModal({
														content: '检测到您没打开相册权限，如需使用储存图片功能请前往设置开启相册权限？',
														confirmText: "确认",
														cancelText: '取消',
													})
												}
											}
										});
									}
								})
							}
						}
					}
				})
				// #endif
			},
			download_haibao(){
				var that=this;
				uni.getSetting({
	                 success(res) {
	                   if (!res.authSetting['scope.writePhotosAlbum']) {
		                     uni.authorize({
		                       scope: 'scope.writePhotosAlbum',
		                       success() {
			                         that.saveImgToLocal();
		                       },
		                       fail() {//这里是用户拒绝授权后的回调
		                           that.openSettingBtnHidden=false
		                       }
		                     })
	                   } else {//用户已经授权过了
							that.saveImgToLocal();
				       }
			        }
			    })
			},
			saveImgToLocal(){
				var that=this;
				uni.downloadFile({
					url: that.haibao,//图片地址
				    success: (res) =>{
						if (res.statusCode === 200){
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
				                success: function() {
									uni.showToast({
										title: "保存成功",
				                        icon: "none"
				                    });
				                },
				                fail: function() {
									uni.showToast({
										title: "保存失败",
				                        icon: "none"
				                    });
				               }
				            });
				        } 
				    }
				});
			},
			shareOutEvent(type){
				var that = this;
				if(type == '1'){
					// #ifdef APP-PLUS
					uni.share({
						provider: 'weixin',
						type: 5,
						title: '好友邀请',
						scene: 'WXSceneSession',
						imageUrl: that.shareimg,
						miniProgram:{
							id:"gh_fc9b2227fa6d",
							path:'pages/shop/shopClass?invite_user_id=' + that.userInfo.id,
							type:0,
							webUrl:'https://uniapp.dclodu.io'
						}
					})
					// #endif
				}else if (type == '2'){
					this.sPopup=false;
					uni.showLoading();
					uni.request({
						url: 'https://oa.yuxiang123.cn/api/user/invite_ewm_shop',
						header:{
							"content-type": "application/x-www-form-urlencoded"
						},
						method: 'POST',
						data:{"token":uni.getStorageSync('token')},
						success: (res) => {
							uni.hideLoading();
							if(res.data.code==1){
								this.showHaibao=true;
								this.haibao=res.data.data;
							}
						},
					});
				}
			
			},
			getInvite:function(){
				this.$show();
				uni.request({
					url: 'https://oa.yuxiang123.cn/api/shop_user/shop_my_invite',
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					data:{
                        "token":uni.getStorageSync('token'),
						type:2
					},
					success: (res) => {
						this.$hide()
					    this.info = res.data.data;
					}
				})
			},
			

			getshareimg(){
				var that=this;
				uni.request({
					url: 'https://oa.yuxiang123.cn/api/index/shareimg',
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					data:{
						name:'shop_invite_img'
					},
					success: (res) => {
						that.shareimg=res.data.data.shareimg;
					}
				})

			},
			//跳转主页
			toHome(url,type){
                if(type == 1 && this.userInfo.is_agent == 1){
                    uni.showToast({
                        title: "申请审核中",
                        icon: "none"
                    });
                    return false;
                }else if(type == 1 && this.userInfo.is_agent == 2){
                    uni.showToast({
                        title: "您已是代理商",
                        icon: "none"
                    });
                    return false;
                }

				uni.navigateTo({
					url:url
				})
			},
		}

	}
</script>

<style lang="scss">
    .list{
	
		.item{
			padding: 20upx 0;
			border-bottom: 2px solid #f5f5f5;
			.user{
				display: flex;
				align-items: center;
				.img{
					image{
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
					}
				}
				.info{
					line-height: 40upx;
					flex: 1;
					margin-left: 20upx;
					margin-top: -10rpx;
					.info_name{
						font-size: 30upx;
						color: #333333;
                        //text-align: right;
					}
					.info_time{
						font-size: 22upx;
						color: #999999;
						//margin-left: 30rpx;
					}
				}
				.star{
					
				}
			}
			.content{
				.text{
					font-size: 28rpx;
					color: #000;
					margin-left: 95rpx;
				}
				.imgList{
					display: flex;
					flex-wrap: wrap;
					.imgItem{
						width: 31%;
						margin-top: 10upx;
						image{
							width: 100%;
							height: 230upx;
							border-radius: 10upx;
						}
					}
					.imgItem:nth-child(3n+2){
						margin: 0 3%;
						margin-top: 10upx;
					}
				}
			}
		}
	}
	.haibao{width:500rpx;}
	.haibao_btn{width:100%;height:80rpx;line-height: 80rpx;background-color:#f60;color:#fff;text-align: center;}
	/*分享*/
	.shareArea{
		display: flex;
		flex-direction:column;
		background-color: #fff;
		border-radius: 16px 16px 0 0;
	}
	.shareTitle{display:flex;padding:20rpx 30rpx 0 30rpx;justify-content:space-between;flex-direction: row;}
	.shareTitle .tit{
		flex-direction: row;
		justify-content: flex-start;
		.text{height:60rpx;line-height:60rpx;font-size:32rpx;}
		.wenhao{width:40rpx;height: 40rpx; margin:10rpx 0 0 10rpx;}
	}
	.shareTitle .close{width:40rpx;height:40rpx;margin:10rpx 0 0 0;}
	.shareList{
		display: flex;
		flex-direction:row;
		padding: 30rpx;
		color:white;
	}
	.shareItem{
		width:130rpx;
		margin-right:40rpx;
		justify-content:center;
		text-align: center;
		overflow: hidden;
	}
	.shareItem::after{border:none;}

	.shareItem .shareImg{
		width: 90rpx;
		height:90rpx;
		margin:0 20rpx;
		line-height: 40rpx;
	}
	.shareItem .shareTxt{
		width:130rpx;
		text-align: center;
		font-size: 28upx;
		margin-top:20rpx;
		color:#999;
	}
.bt_im{
    position: absolute;
    top: 522rpx;
    margin-left: 12%;
    width: 76%;
}
.content_v{
    text-align: center;
    color: #3662EC;
    font-size: 40rpx;
    font-weight: 600;
    margin-top: 45rpx;
    margin-bottom: 30rpx;
}
.content_tt{
    padding-bottom: 1% !important;
    width: 80%;
    padding: 4.5%;
    background: #F9FEFF;
    margin-top: 50rpx;
    margin-left: 5%;
    border-radius: 30rpx;
    border: 2px solid #76B4FF ;
    margin-bottom: 150rpx;
}
.content_t{
    padding-bottom: 1% !important;
    width: 80%;
    padding: 4.5%;
    background: #F9FEFF;
    margin-top: 570rpx;
    margin-left: 5%;
    border-radius: 30rpx;
    border: 2px solid #76B4FF ;
}
.invite{
	width: 89%;
    margin-left: 5%;
	text-align: center;
	margin-top: 50rpx;
    height: 90rpx;
	font-weight: 600;
	color: #fff;
	line-height: 90rpx;
	font-size: 42rpx;
    background-image: linear-gradient(to right, #698DFF, #3662EC);
    border-radius: 80rpx;
}

.content{
	width: 33%;
    height: 180rpx;
    text-align: center;
    line-height: 80rpx;
    margin-top: 30rpx;
}
.tixian{
    width: 120rpx;
    height: 55rpx;
    line-height: 55rpx;
    background: #3662EC;
    color: #fff;
    text-align: center;
    border-radius: 15rpx;
    position: absolute;
    right: 50rpx;
    margin-top: -240rpx;
}
.content-font{
	font-size: 40rpx;
	color: #3662EC;
	font-weight: 600;
}
.content-center{
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
}
.letter{
	width: 89%;
    margin-left: 5%;
	margin-top: 20rpx;
    height: 400rpx;
    background: #fffefb;
    border: 10rpx solid #ffdba9;
    border-radius: 40rpx;
}
.bt{
	background: url("https://oa.yuxiang123.cn/uploads/xcx_img/sl_bj.png") no-repeat;
	max-height:2600rpx;
	min-height:1900rpx;
    //padding-bottom:120rpx;
	width:100%;
	overflow: hidden;
	background-size:cover;
}
.xy_img{
	width: 90%;
	margin-left: 5%;
	margin-top: 20rpx;
}

.tis{
	font-size: 36rpx;font-weight: 600;color: #fff;text-align: center;margin-top: 30rpx;
}
</style>

